لطفا جهت پرداخت (ورود به درگاه بانک) فیلترشکن خود را خاموش نمایید.
لطفا جهت اطلاع از آخرین دوره ها و اخبار سایت در
کانال تلگرام
عضو شوید.
طراحی وب سایت ریسپانسیو با HTML5 و CSS [ویدئو]
Responsive Web Design with HTML5 and CSS [Video]
نکته:
آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره:
در این دوره، شما سفری را برای تسلط بر اصول طراحی وب ریسپانسیو آغاز خواهید کرد، که از اصول اساسی شروع می شود و به تکنیک های پیشرفته می رسد. شما با کاوش در اصول طراحی واکنشگرا، درک پشتیبانی مرورگر، و غواصی در پرسش های رسانه ای شروع خواهید کرد. از آنجا، یاد خواهید گرفت که نشانه گذاری موثر HTML، از جمله عناصر معنایی جدید در HTML5 بنویسید، و دسترسی را با انطباق WCAG و WAI-ARIA افزایش دهید.
در مرحله بعد، به پیچیدگیهای پرسشهای رسانهای و پرسوجوهای کانتینر، درک پیادهسازی آنها و آزمایش طرحهای پاسخگو خواهید پرداخت. شما طرحهای پیکسل ثابت را به طرحبندیهای روان تبدیل میکنید و از قدرت Flexbox و CSS Grid برای طراحیهای پیچیده و انعطافپذیر استفاده میکنید. انتخابگرهای پیشرفته CSS، تایپوگرافی و تکنیکهای رنگی، همراه با مدیریت عکسهای واکنشگرا و استفاده از SVG برای گرافیکهای برداری مقیاسپذیر پوشش داده خواهد شد.
بخشهای آخر شما را از طریق انتقال، تبدیلها و انیمیشنها همراه با ویژگیهای CSS پیشرفته مانند ویژگیهای سفارشی و توابع CSS میبرد. همچنین تکنیکهای عملی برای فرمهای HTML5، قابلیتهای پیشرفته CSS و بهینهسازی عملکرد را بررسی خواهید کرد. این دوره به شما اطمینان می دهد که مهارت ایجاد وب سایت های خیره کننده و واکنش گرا را دارید که متمایز هستند. با استفاده از HTML5 و CSS وب سایت های واکنش گرا و سازگار ایجاد کنید
پیاده سازی تکنیک های پیشرفته CSS برای چیدمان و طراحی
افزایش دسترسی به وب با استانداردهای WCAG و WAI-ARIA
عملکرد وب را بهینه کنید و تصاویر واکنشگرا را به طور موثر مدیریت کنید
ویژگی های پیشرفته CSS و ویژگی های سفارشی این دوره برای توسعه دهندگان و طراحان وب با درک اولیه HTML و CSS طراحی شده است که می خواهند دانش خود را در مورد طراحی وب واکنش گرا عمیق تر کنند. تجربه قبلی با توسعه وب پایه توصیه می شود. کاوش در طیف کامل طراحی وب ریسپانسیو، از اصول اولیه تا تکنیک های پیشرفته * جلسات عملی با HTML5 و CSS، با تمرکز بر برنامه های کاربردی دنیای واقعی و بهترین شیوه ها * کشف روش هایی برای بهبود عملکرد وب سایت و مدیریت تصاویر واکنش گرا
سرفصل ها و درس ها
اصول طراحی وب سایت واکنش گرا
The Fundamentals of Responsive Web Design
مقدمه
Introduction
پشتیبانی مرورگر، ابزار و نمونه کد
Browser support, tooling and code samples
آشنایی با طراحی وب سایت واکنش گرا
Understanding Responsive Web Design
پرسش های رسانه ای را وارد کنید
Enter media queries
خلاصه
Summary
نوشتن نشانه گذاری HTML
Writing HTML Markup
نوشتن نشانه گذاری HTML
Writing HTML Markup
شروع صحیح صفحات HTML
Starting HTML pages correctly
عناصر معنایی جدید در HTML5
New semantic elements in HTML5
عناصر گروه بندی HTML
HTML grouping elements
معناشناسی سطح متن HTML
HTML text-level semantics
استفاده از عناصر HTML5
Using HTML5 elements
انطباق دسترسی WCAG و WAI-ARIA برای برنامه های کاربردی وب در دسترس تر
WCAG accessibility conformance and WAI-ARIA for more accessible web applications
جاسازی رسانه در HTML5
Embedding media in HTML5
عنصر
The element
خلاصه و تکلیف
Summary and homework
پرسش های رسانه ای و پرس و جوهای کانتینر
Media Queries and Container Queries
پرسش های رسانه ای و پرس و جوهای کانتینر
Media Queries and Container Queries
متا تگ و پرسش های رسانه ای
The meta tag and Media Queries
تست طرحهای واکنشگرا بر روی شبیهسازها و شبیهسازها
Testing responsive designs on emulators and simulators
آیا باید پرس و جوهای رسانه ای را به فایل های خود تقسیم کنید؟
Should you split media queries into their own files?
پرسشهای رسانهای را ادغام کنید یا آنها را در جایی که مناسب است پراکنده کنید؟
Consolidate media queries or scatter them where it suits?
پرس و جوهای رسانه سطح 5
Media Queries Level 5
پرس و جوهای کانتینر
Container queries
خلاصه
Summary
Fluid Layout و Flexbox
Fluid Layout and Flexbox
Fluid Layout و Flexbox - مقدمه
Fluid Layout and Flexbox - Introduction
تبدیل یک طرح پیکسل ثابت به یک طرح متناسب سیال
Converting a fixed pixel design to a fluid proportional layout
چرا به Flexbox نیاز داریم؟
Why do we need Flexbox?
پیاده سازی Flexbox
Flexbox Implementation
پاورقی چسبنده
Sticky Footer
مرتب سازی مجدد بصری
Visual Reordering
خلاصه
Summary
طرح بندی با شبکه CSS
Layout with CSS Grid
Layout با CSS Grid - مقدمه
Layout with CSS Grid - Introduction
نحو اصلی گرید
Basic Grid syntax
پالایش سیستم گرید ما
Refining our Grid System
قرار دادن و اندازه بندی موارد Grid Layout
Placing and sizing Grid Layout items
خطوط شبکه و مناطق شبکه-الگو نامگذاری شده است
Named grid lines and grid-template-areas
تنظیم خودکار و پر کردن خودکار
auto-fit and auto-fill
نحو مخفف
Shorthand syntax
اجازه دادن به عناصر تو در تو برای مشارکت در Grid
Allowing nested elements to take part in the Grid
خلاصه
Summary
انتخابگرهای CSS، تایپوگرافی و موارد دیگر
CSS Selectors, Typography and More
انتخابگرهای CSS، تایپوگرافی و موارد دیگر
CSS Selectors, Typography, and More
انتخابگرها، واحدها و قابلیت ها
Selectors, units, and capabilities
انتخابگرهای CSS - فراتر از حالت عادی!
CSS selectors - beyond the normal!
شبه کلاس های ساختاری CSS
CSS structural pseudo-classes
انتخاب بر اساس nth در طراحی های وب واکنش گرا
nth-based selection in responsive web designs
انتخابگرهای ترکیبی - فرزند، خواهر و برادر بعدی و خواهر و برادر بعدی
Combinator selectors – child, next sibling, and subsequent sibling
انتخابگرهای گروه بندی
Grouping selectors
طول های مربوط به viewport پاسخگو
Responsive viewport-relative lengths
استفاده از @supports برای فورک کردن CSS
Using @supports to fork CSS
تایپوگرافی وب
Web typography
قانون @font-face CSS
The @font-face CSS rule
فونت های متغیر
Variable fonts
خلاصه
Summary
رنگ CSS
CSS Color
مقدمه
Introduction
فرمت رنگ RGB
RGB Color Format
کانال آلفا
Alpha Channel
مفاهیم رنگ و اصطلاحات
Color concepts and terminology
فضاهای رنگی پیشرفته
Advanced Color Spaces
کاوش رنگ آزمایشگاهی و LCH
Exploring Lab and LCH color
OKLab و OKLCH
OKLab & OKLCH
استفاده از توابع color-mix() & color-contrast()
Using color-mix() & color-contrast() functions
خلاصه
Summary
زیبایی شناسی خیره کننده با CSS
Stunning Aesthetics with CSS
مقدمه و اهداف
Introduction and Objectives
سایه های متن و سایه های جعبه
Text Shadows and Box Shadows
گرادیان های پس زمینه
Background Gradients
گرادیان های مخروطی، گرادیان های تکراری و الگوهای گرادیان پس زمینه
Conic Gradients, Repeating Gradients and Background Gradient Patterns
تصاویر پس زمینه چندگانه
Multiple Background Images
فیلترهای CSS
CSS Filters
مسیر کلیپ CSS
CSS clip-path
Mask-Image و Mix-Blend-Mode
Mask-Image and Mix-Blend-Mode
خلاصه
Summary
تصاویر واکنش گرا
Responsive Images
مقدمه ای بر تصاویر واکنش گرا
Introduction to Responsive Images
فرمت های تصویر مدرن
Modern Image Formats
نحو برای تصاویر واکنشگرا
Syntax for Responsive Images
جهت هنری با عنصر تصویر
Art direction with the picture element
خلاصه
Summary
SVG
SVG
مقدمه ای بر SVG
Introduction to SVG
آشنایی با یک SVG پایه
Understanding a basic SVG
عناصر و ویژگی های SVG
Elements and Attributes of SVG
ایجاد SVG
Creating SVGs
درج SVG در صفحات وب
Inserting SVGs into Webpages
استفاده مجدد از اشیاء گرافیکی از نمادها
Reusing Graphical Objects from Symbols
رنگآمیزی مجدد SVGها با ویژگیهای سفارشی CSS
Re-coloring SVGs with CSS Custom Properties
استفاده مجدد از اشیاء گرافیکی از منابع خارجی
Reusing Graphical Objects from External Sources
رنگآمیزی SVG با ماسک تصویر
Coloring SVGs with mask-image
بررسی روشهای درج SVG
Exploring SVG Insertion Methods
انیمیشن SMIL
SMIL Animation
یک ظاهر طراحی SVG
Styling SVGs
متحرک سازی یک SVG با CSS
Animating an SVG with CSS
متحرک سازی SVG با جاوا اسکریپت
Animating SVG with JavaScript
استفاده از SVG به عنوان فیلتر
Using SVGs as Filters
درک پرسش های رسانه ای در SVG ها
Understanding Media Queries within SVGs
بهینه سازی SVG ها
Optimizing SVGs
خلاصه و منابع
Summary and Resources
انتقال، تبدیل و انیمیشن
Transitions, Transformations and Animations
مقدمه ای بر انتقال ها، تبدیل ها و انیمیشن ها
Introduction to Transitions, Transformations, and Animations
انتقال CSS و ویژگی های آنها
CSS Transitions and Their Properties
درک توابع زمان بندی برای انتقال CSS
Understanding Timing Functions for CSS Transitions
CSS 2D تبدیل می شود
CSS 2D Transforms
درک ویژگی Transform-origin
Understanding the Transform-origin Property
CSS 3D Transformations
CSS 3D Transformations
آموزش در مورد ویژگی Translate3D
Learning about the Translate3D Property
انیمیشن CSS، تمرین، آموزش و خلاصه
CSS Animations, Exercises, Training and Summary
ویژگی های سفارشی و توابع CSS
Custom Properties and CSS Functions
مقدمه ای بر توابع CSS و ویژگی های سفارشی
Introduction to CSS Functions and Custom Properties
شروع با CSS Custom Properties
Starting with CSS Custom Properties
تغییر ویژگی های سفارشی با جاوا اسکریپت
Switching Custom Properties with JavaScript
مشخصات ویژگی های سفارشی
Specificities of Custom Properties
کاوش در جزئیات توابع CSS
Exploring CSS Functions in Detail
نگاهی به توابع حداقل، حداکثر و گیره CSS
Looking at the min, max and clamp Functions of CSS
ادغام دانش ما تا کنون
Integrating Our Knowledge So Far
خلاصه
Summary
فرم ها
Forms
مقدمه ای بر فرم های HTML5
Introduction to HTML5 Forms
آشنایی با اجزای فرم های HTML5
Understanding the Components of HTML5 Forms
کاوش ویژگیهایی مانند «لازم» و «فوکوس خودکار»
Exploring attributes like 'required' and 'autofocus'
یادگیری در مورد ویژگی تکمیل خودکار و لیست
Learning about the autocomplete and list attribute
انواع ورودی HTML5
HTML5 Input Types
درک ورودی های تاریخ و زمان
Understanding the Date and Time Inputs
سبک سازی فرم های HTML5 با CSS
Styling HTML5 Forms with CSS
نشان دادن فیلدهای مورد نیاز
Indicating Required Fields
یک ظاهر طراحی شده به کارت های ورودی و پر کردن پس زمینه با CSS
Styling Input Carets and Background Fills with CSS
خلاصه
Summary
ویژگی های CSS لبه
Cutting Edge CSS Features
مقدمه ای بر ویژگی های CSS و لایه های Cascade
Introduction to CSS Features and Cascade Layers
تسلط بر لایه های آبشاری برای بهبود مدیریت سبک
Mastering Cascade Layers for Improved Style Management
یادگیری در مورد CSS Nesting
Learning about CSS Nesting
ساده سازی CSS با انتخابگرهای تودرتو و پرسش های رسانه ای
Simplifying CSS with Nested Selectors and Media Queries
خلاصه
Summary
تکنیک های پاداش و مشاوره جدایی
Bonus Techniques and Parting Advice
نکات و تکنیک ها - مقدمه
Tips and Techniques - Introduction
کوتاه کردن متن در CSS
Truncating Text in CSS
پانل های اسکرول و نوارهای پیمایش سفارشی
Scrolling Panels and Custom Scrollbars
CSS Scroll Snap
CSS Scroll Snap
پیمایش روان با رفتار اسکرول CSS
Smooth Scrolling with CSS scroll-behavior
توصیه مهم جدایی
Important Parting Advice
تنظیم سطوح پشتیبانی مرورگر
Setting Browser Support Levels
CSS Frameworks و Linting
CSS Frameworks and Linting
بررسی عملکرد و ابزارهای عملکرد
Exploring Performance and Performance Tools
Packtpub یک ناشر دیجیتالی کتابها و منابع آموزشی در زمینه فناوری اطلاعات و توسعه نرمافزار است. این شرکت از سال 2004 فعالیت خود را آغاز کرده و به تولید و انتشار کتابها، ویدیوها و دورههای آموزشی میپردازد که به توسعهدهندگان و متخصصان فناوری اطلاعات کمک میکند تا مهارتهای خود را ارتقا دهند. منابع آموزشی Packtpub موضوعات متنوعی از جمله برنامهنویسی، توسعه وب، دادهکاوی، امنیت سایبری و هوش مصنوعی را پوشش میدهد. محتوای این منابع به صورت کاربردی و بهروز ارائه میشود تا کاربران بتوانند دانش و تواناییهای لازم برای موفقیت در پروژههای عملی و حرفهای خود را کسب کنند.
بن فراین از سال 1996 یک طراح/توسعهدهنده وب بوده است. او در حال حاضر به عنوان سرپرست فنی UI-UX در bet365 مشغول به کار است. قبل از وب، او به عنوان یک بازیگر تلویزیونی کم ارزش (و متواضع) و روزنامه نگار فناوری کار می کرد، که از دانشگاه سالفورد در رشته رسانه و اجرا فارغ التحصیل شد. او چهار فیلمنامه به همان اندازه دست کم گرفته شده (به عقیده او) نوشته است و هنوز هم این باور را دارد که ممکن است یکی را بفروشد. خارج از کار، او از لذت های ساده لذت می برد: کتاب، فیلم و تشکیل خانواده.
نمایش نظرات